﻿// JavaScript Document

var item;

var workTarID = 0;	//記錄目前作品
var workNum;		//作品集總數

//判斷是否為行動裝置
var mobiles = new Array
		(
			"midp", "j2me", "avant", "docomo", "novarra", "palmos", "palmsource",
			"240x320", "opwv", "chtml", "pda", "windows ce", "mmp/",
			"blackberry", "mib/", "symbian", "wireless", "nokia", "hand", "mobi",
			"phone", "cdm", "up.b", "audio", "sie-", "sec-", "samsung", "htc",
			"mot-", "mitsu", "sagem", "sony", "alcatel", "lg", "eric", "vx",
			"NEC", "philips", "mmm", "xx", "panasonic", "sharp", "wap", "sch",
			"rover", "pocket", "benq", "java", "pt", "pg", "vox", "amoi",
			"bird", "compal", "kg", "voda", "sany", "kdd", "dbt", "sendo",
			"sgh", "gradi", "jb", "dddi", "moto", "iphone", "android",
			"iPod", "incognito", "webmate", "dream", "cupcake", "webos",
			"s8000", "bada", "googlebot-mobile"
		)

var ua = navigator.userAgent.toLowerCase();
var isMobile = false;
for (var i = 0; i < mobiles.length; i++) {
	if (ua.indexOf(mobiles[i]) > 0) {
		isMobile = true;
		break;
	}
}

function worksInit(){
	
	//取得json資料
	$.getJSON('ajax/works.json', function(data) {
		
		item = data ? data : [];		
		workNum = item.worksData.length;
		
		for( var i=0 ; i < workNum ; i++ ){			
			$('<li><img src="'+ item.worksData[i].list +'" width="110" height="80"></li>').appendTo('#portfolioList');			
		};
		
		$('#portfolioList li').eq(workTarID).css({ left:38 });
		workBtnHandler();
		
	});
	
	if(isMobile == true){
		$('#blackMsk').css({
			width:$(window).width(),
			height:$(window).height()
		});
	}else{
		$('#blackMsk').css({
			width:screen.width,
			height:screen.height
		});
	}
	
};

//按鈕事件
function workBtnHandler(){
	
	//左右按鈕事件
	$('.arrowBtn').mouseover(function(e) {        
		arrowBtnHandler(e);
    });
	
	$('.arrowBtn').mouseleave(function(e) {        
		TweenLite.to( $('.arrowBtn img.btnIcon'), 0.3, { css:{ left:0}, ease:Quart.easeOut });
    });
	
	$('.arrowBtn').click(function(e) {
		arrowBtnClickHandler(e);		
    });
	
	//作品集列表事件
	$('#portfolioList li').mouseover(function(e){		
		TweenLite.to( $(this), 0.6, { css:{ scaleX:1.1, scaleY:1.1 }, ease:Elastic.easeOut });
	});
	
	$('#portfolioList li').mouseleave(function(e){		
		TweenLite.to( $(this), 0.3, { css:{ scaleX:1, scaleY:1 }, ease:Quart.easeOut });
	});
	
	$('#portfolioList li').click(function(e){		
		workPopGetdataHandler(e);			
	});
	
	//workPop按鈕事件
	$('.popArrowBtn').mouseover(function(e) {        
		arrowBtnHandler(e);
    });
	
	$('.popArrowBtn').mouseleave(function(e) {        
		TweenLite.to( $('.popArrowBtn img.btnIcon'), 0.3, { css:{ left:0}, ease:Quart.easeOut });
    });
	
	$('.popArrowBtn').click(function(e) {
		popArrowBtnClickHandler(e);		
    });
	
	$('#worksPopImgMain').click(function(e) {
		window.open(popImgUrl,"_blank");
    });
	
	$('#workPopClose').click(function(e){
		workPopCloseHandler();
	});
	
	$('#blackMsk').click(function(e){
		workPopCloseHandler();
	});
	
};

//作品集點擊事件
var popTarID = 0;	//記錄目前pop作品
var popNum;			//pop作品集總數
var popImgUrl;		//pop作品連外連結

function workPopGetdataHandler(e){
	
	$('#worksPopImgMain li').remove();
	
	var tarObj = e.target;
	var tarID = $(tarObj).parent().index();
	
	popNum = item.worksData[tarID].imgs.length;	
	popImgUrl = item.worksData[tarID].url;
	
	for( var i=0 ; i < popNum ; i++ ){			
		$('<li><img src="'+ item.worksData[tarID].imgs[i].imgUrl  +'" ></li>').appendTo('#worksPopImgMain');			
	};
	
	workPopOpenHandler();
	
};

function workPopOpenHandler(){
	
	popTarID = 0;
	
	$('#blackMsk').css({ opacity:0, display:"block" });
	TweenLite.to( $('#blackMsk'), 0.5, { css:{ opacity:0.9 }, ease:Quart.easeOut });
	
	$('#worksPop').css({
		left:cenX - $('#worksPop').width()/2,
		top:cenY - 	$('#worksPop').height()/2
	});
	
	$('#worksPop').css({ opacity:0, display:"block" });
	TweenLite.to( $('#worksPop'), 0.5, { css:{ opacity:1 }, ease:Quart.easeOut, delay:0.2 });
	TweenLite.from( $('#worksPop'), 1.5, { css:{ top:0 }, ease:Elastic.easeOut, delay:0.2 });
	
	$('#worksPopImgMain li').css({ left:-637 });
	TweenLite.to( $('#worksPopImgMain li').eq(popTarID), 0, { css:{ left:0}, ease:Quart.easeOut });
	
};

function popArrowBtnClickHandler(e){
	
	var tarObj = e.target;
	
	switch( $(tarObj).parent().attr('id') ){		
		case 'popNextBtn':
			popImgMoveHandler( 'next' );
			break;
			
		case 'popPrevBtn':
			popImgMoveHandler( 'prev' );
			break;		
	};
	
};

function popImgMoveHandler( tarType ){
	
	switch(tarType){
		
		case 'next':
			TweenLite.to( $('#worksPopImgMain li').eq(popTarID), 0.5, { css:{ left:-637}, ease:Quart.easeOut });
			popTarID ++
			if( popTarID > popNum-1 ){
				popTarID = 0;
			};
			$('#worksPopImgMain li').eq(popTarID).css({ left:637 });
			break;
			
		case 'prev':
			TweenLite.to( $('#worksPopImgMain li').eq(popTarID), 0.5, { css:{ left:637}, ease:Quart.easeOut });
			popTarID --
			if( popTarID < 0 ){
				popTarID = popNum-1;
			};
			$('#worksPopImgMain li').eq(popTarID).css({ left:-637 });
			break;
		
	};
	
	TweenLite.to( $('#worksPopImgMain li').eq(popTarID), 0.5, { css:{ left:0}, ease:Quart.easeOut });
	
};

//workPop關閉
function workPopCloseHandler(){

	TweenLite.to( $('#blackMsk'), 0.8, { css:{ opacity:0 }, ease:Quart.easeOut, onComplete:aniFIN, delay:0.2 });
	TweenLite.to( $('#worksPop'), 0.5, { css:{ opacity:0 }, ease:Quart.easeOut, delay:0.3 });
	TweenLite.to( $('#worksPop'), 0.5, { css:{ top:-300 }, ease:Back.easeIn });
	
	function aniFIN(){		
		$('#blackMsk').css({ display:"none" });
		$('#worksPop').css({ display:"none" });
	};

}


//作品集左右鈕點擊效果
function arrowBtnClickHandler(e){
	
	var tarObj = e.target;
	
	switch( $(tarObj).parent().attr('id') ){		
		case 'nextBtn':
			workListMoveHandler( 'next' );
			break;
			
		case 'prevBtn':
			workListMoveHandler( 'prev' );
			break;		
	};	
	
};

//作品集列表切換事件
function workListMoveHandler( tarType ){
	
	switch(tarType){
		
		case 'next':
			TweenLite.to( $('#portfolioList li').eq(workTarID), 0.5, { css:{ left:293}, ease:Quart.easeOut });
			workTarID ++
			if( workTarID > workNum-1 ){
				workTarID = 0;
			};
			$('#portfolioList li').eq(workTarID).css({ left:-110 });
			break;
			
		case 'prev':
			TweenLite.to( $('#portfolioList li').eq(workTarID), 0.5, { css:{ left:-110}, ease:Quart.easeOut });
			workTarID --
			if( workTarID < 0 ){
				workTarID = workNum-1;
			};
			$('#portfolioList li').eq(workTarID).css({ left:110 });
			break;
		
	};
	
	TweenLite.to( $('#portfolioList li').eq(workTarID), 0.5, { css:{ left:38}, ease:Back.easeOut });
	
};

//作品集左右按鈕滑入效果
function arrowBtnHandler(e){
	
	var tarObj = e.target;
		
	switch( $(tarObj).parent().attr('id') ){
	
		case 'nextBtn':
			TweenLite.to( $(tarObj).parent().find('img.btnIcon'), 0.6, { css:{ left:10}, ease:Elastic.easeOut });
			break;
			
		case 'prevBtn':
			TweenLite.to( $(tarObj).parent().find('img.btnIcon'), 0.6, { css:{ left:-10}, ease:Elastic.easeOut });
			break;
			
		case 'popNextBtn':
			TweenLite.to( $(tarObj).parent().find('img.btnIcon'), 0.6, { css:{ left:10}, ease:Elastic.easeOut });
			break;
			
		case 'popPrevBtn':
			TweenLite.to( $(tarObj).parent().find('img.btnIcon'), 0.6, { css:{ left:-10}, ease:Elastic.easeOut });
			break;
	
	};
	
};